import React from 'react';
import { Button, ColorPicker, Divider, Space, Typography } from 'antd';
import useThemeStore from '../store/themeStore';

const { Title } = Typography;

const ThemeSettings = () => {
  const { primaryColor, setPrimaryColor, resetTheme } = useThemeStore();

  const handleColorChange = (color) => {
    setPrimaryColor(color.toHexString());
  };

  return (
    <div className="p-4 border rounded-md shadow-sm">
      <Title level={5}>主题设置</Title>
      <Divider />
      
      <Space direction="vertical" className="w-full">
        <div className="flex items-center justify-between">
          <span>主题色</span>
          <ColorPicker
            value={primaryColor}
            onChange={handleColorChange}
            defaultValue={primaryColor}
            showText
          />
        </div>
        
        <Button onClick={resetTheme} className="mt-4">
          恢复默认主题
        </Button>
      </Space>
    </div>
  );
};

export default ThemeSettings; 